<!-- 账单详情 -->
<template>
	<view>
		<view class="bar"></view>
		<view class="top">
			<view class="title u-f-jsb">
				<view>账单明细</view>
				<view class="gray" v-if="orderInfo.billStatus==1">已结算</view>
				<view class="red" v-else-if="orderInfo.billStatus==0">审核中</view>
			</view>
			<view class="content">
				<view class="u-f-jsb">
					<view>账单号</view>
					<view>{{orderInfo.billCode}}</view>
				</view>
				<view class="u-f-jsb">
					<view>账单日期</view>
					<view>{{orderInfo.startTime}} <text v-if="orderInfo.period==2"> 至 {{orderInfo.endTime}}</text></view>
				</view>
				<view class="u-f-jsb">
					<view>项目名称</view>
					<view>{{orderInfo.sharerName}}</view>
				</view>
				<view class="u-f-jsb">
					<view>银行账号</view>
					<view>{{orderInfo.bankAccount}}</view>
				</view>
				<view class="u-f-jsb">
					<view>开户行</view>
					<view>{{orderInfo.bankName}}</view>
				</view>
				<view class="u-f-jsb">
					<view>账户名称</view>
					<view>{{orderInfo.financeName}}</view>
				</view>
				<view class="u-f-jsb">
					<view>结算周期</view>
					<view>{{orderInfo.period==1?'日':'月'}}</view>
				</view>
				<view class="u-f-jsb">
					<view>账单金额</view>
					<view>￥{{orderInfo.billMoney}}</view>
				</view>
			</view>
			<view class="content-2">
				<view class="title">账单结算方式：</view>
				<view class="range">
					<view v-if="orderInfo.shareStrategy.type ==1">
						<view>收益=加注总量 * {{orderInfo.shareStrategy.unitPrice}}元/吨</view>
					</view>
					<template v-else>
						<view class="u-f-jsb" v-for="(item,index) in orderInfo.shareStrategy.ladder" :key="index">
							<view>{{item.downStairs}} ＜ 加注总量 ≤ {{item.upStairs}}吨</view>
							<view class="border-bottom"></view>
							<view v-if="orderInfo.shareStrategy.type ==3">收益=加注总量 * {{item.unitPrice || item.rate}}元/吨</view>
							<view v-if="orderInfo.shareStrategy.type == 2">收益=利润 * {{item.rate}}%</view>
						</view>
					</template>
					
				</view> 
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo:'' // 账单信息
			};
		},
		onLoad(optios) {
			this.id = optios.id;
			this.getBillDetail();
		},
		methods:{
			// 获取账单详情
			getBillDetail() {
				this.$u.api._orderDetail({billId:this.id}).then(res => {
					this.orderInfo = res;
					this.orderInfo.shareStrategy = JSON.parse(this.orderInfo.shareStrategy);
				})
			}
		}
	}
</script>

<style lang="scss">

.gray {
	color: rgba(154, 154, 154, 1);
	font-weight: normal;
}
.red {
	color: red;
}
.top {
	background-color: #FFFFFF;
	padding: 0rpx 30rpx;
	padding-bottom: 30rpx;
	
	.title {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 90rpx;
		border-bottom: 2rpx solid rgba(238, 238, 238, 1);
	}
	.content>view {
		line-height: 66rpx;
		font-weight: 600;
		>view:first-child{
			font-weight: 400;
			color: rgba(154, 154, 154, 1);
		}
	}
	
	.content-2 {
		.title {
			font-weight: 600;
			font-size: 28rpx;
			border: none;
		}
		.range {
			padding: 30rpx 50rpx;
			background: #F9F9F9;
			font-size: 24rpx;
			line-height: 50rpx;
			border-radius: 10rpx;
		}
		.border-bottom {
			flex: 1;
			border-bottom: 1rpx solid #cecece;
			margin: 0 20rpx;
		}
		
	}
}

.bottom {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx 36rpx;
	
	.title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 60rpx;
	}
	.tongji {
		display: flex;
		justify-content: space-evenly;
		padding-bottom: 50rpx;
		border-bottom: 1rpx solid #eee;
		
		.num {
			font-size: 36rpx;
		}
		.label {
			font-size: 20rpx;
			color: #888;
		}
		>view:nth-child(1){
			image {
				width: 52rpx;
				height: 55rpx;
				flex-shrink: 0;
				margin-right: 28rpx;
			}
		}
		
		>view:nth-child(2) {
			height: 60rpx;
			width: 1rpx;
			background-color: rgba(222, 222, 222, 1);
		}
		>view:nth-child(3) {
			image {
				width: 54rpx;
				height: 55rpx;
				flex-shrink: 0;
				margin-right: 28rpx;
			}
		}
	}
	
	.list {
		.item {
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #eee;
			font-size: 28rpx;
			
			.time {
				font-size: 28rpx;
				color: rgba(154, 154, 154, 1);
			}
		}
	}
}
</style>
